<template>
    <div class="main-content">
        <levelbar></levelbar>
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="formInline" ref="formInline" label-width="40px">
                     <el-row :gutter="41">
                         <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="formInline.provinceId"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="formInline.cityId" :province="formInline.provinceId"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="formInline.areaId" :city="formInline.cityId"></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                      <el-col :span="7">
                            <el-form-item label="月份">
                                 <el-date-picker
                                    v-model="formInline.giveTimeStart" 
                                    style="width:100%"
                                    :clearable="false" 
                                    :editable="false" 
                                    type="month"
                                    :picker-options="formInline.pickerOptions1" 
                                    placeholder="选择月份">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="14">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" v-loading="loadingChart">
                <div class="charts-title">用户增长趋势</div>
                <div class="charts-display">
                    <trendChart width='100%' height='100%' id="trendChart1" :option='trendChart1Option'></trendChart>
                </div>
            </div>
             <div slot="table">
                <div class="table-title">
                   <span class="table-title-span">
                        <exportExcel @ee="exportFile"></exportExcel>
                    </span>
                </div> 
                <el-table border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change='sortChange'>
                <el-table-column align="center"
                      label="新增教师数" sortable='custom' prop="teacherNumber">
                      <template scope="scope">
                       <span>{{ scope.row.teacherNumber|isNull}}</span>
                     </template>
                </el-table-column>
                <el-table-column align="center" label="新增家长数" sortable='custom' prop="parentNumber">
                    <template scope="scope">
                       <span>{{ scope.row.parentNumber|isNull}}</span>
                     </template>
                </el-table-column>
                <el-table-column align="center" label="新增学生数" sortable='custom' prop="studentNumber">
                    <template scope="scope">
                       <span>{{ scope.row.studentNumber|isNull}}</span>
                     </template>
                </el-table-column>
                <el-table-column align="center" label="新增总数" sortable='custom' prop="allNumber">
                     <template scope="scope">
                       <span>{{ scope.row.allNumber|isNull}}</span>
                     </template>
                </el-table-column>
                <el-table-column align="center" label="日期" prop="date">
                     <template scope="scope">
                       <span>{{ scope.row.date|isNull}}</span>
                     </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" 
                :current-page.sync="listQuery.page" 
                :page-sizes="config.pageSizes" 
                :page-size="config.pageSize"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange">
                </el-pagination>
            </div>
          </div>
        </echartsLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import { mapState, mapActions, mapGetters } from 'vuex';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import moment from 'moment';
    import {listNewUser, listNewUserPage} from 'api/pingtaifenxi';
    import exportExcel from 'components/ExportExcel/index'; 
    export default{
        components: {exportExcel, province, city, region, echartsLayout, Levelbar, trendChart},
        data() {
            return {
                jsonStr: null,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                trendChart1Option: null,
                formInline: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    school: '',
                    schoolType: '',
                    giveTimeStart: moment(new Date()).format('YYYY-MM'),
                    pickerOptions1: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                },
                newTeacherCountStatus: '',
                newParentCountStatus: '',
                newStudentCountStatus: '',
                allUserCountStatus: '',
                loading: true,
                loadingChart: true,
                AnnounceList: [],
                listQuery: {// 分页
                    page: 1,
                    total: 0
                }
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'uid'
            ])
        },
        created() {
            this.searchEchart();// 图和表
            this.searchTable();// 列表
        },
        methods: {
            // 全局获取行数
            ...mapActions(['ChangePageSize']),
            submit() {
                this.searchEchart();// 图和表
                this.searchTable();// 图和表
            },
        //   点击查询时，要查询图
            searchEchart() {
                this.loadingChart=true;
                let ymDate=moment(this.formInline.giveTimeStart).format('YYYY-MM')
                let provinceId = this.formInline.provinceId;
                let cityId = this.formInline.cityId;
                let areaId = this.formInline.areaId;
                listNewUser(ymDate, provinceId, cityId, areaId).then(res => {
                    this.loadingChart=false;
                    let xAxisData=[];// x轴坐标
                    let data=[];// y轴数据
                    if (res.data.content.length) {
                        let dataList=res.data.content[0];// 图
                        // 判断 返回共31天
                        // 1：如果是当前月，取到昨天
                        // 2：如果是其他月，根据月的长度取
                        let currentMonth=moment(new Date()).format('YYYY-MM');// 本月
                        let currentMonthLen=Number(moment(new Date()).format('DD'))-1;// 本月
                        let searchMonth=moment(this.formInline.giveTimeStart).format('YYYY-MM')// 查询月
                        let searchDays = moment(this.formInline.giveTimeStart).daysInMonth();// 查询月的天数
                        if (currentMonth!==searchMonth) {// 不是当前月 取长度30  31 
                            for (let i=1;i<searchDays+1;i++) {
                                let today=i<10?'0'+i:i;
                                xAxisData.push(searchMonth+'-'+today)// x轴坐标
                            }
                        } else {// 本月 取到昨天
                            for (let j=1;j<currentMonthLen+1;j++) {
                                let todayj=j<10?'0'+j:j;
                                xAxisData.push(searchMonth+'-'+todayj)
                            }
                        }
                        for (let value of Object.values(dataList)) {
                            if (value!==ymDate) {
                                data.push(value)// 数值
                            }
                        }
                        data=data.slice(0, xAxisData.length)
                    } else {
                        data=[]
                    }
                
                    let ydataList=[{
                        name: '用户增长',
                        type: 'line',
                        data
                    }];
                    this.trendChart1Option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            icon: 'rect',
                            data: ['用户增长']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: xAxisData
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: ydataList
                    };
                }).catch(() => {
                    this.loadingChart=false;
                });
            },
            // 点击列表的分页只查表
            searchTable() {
                this.loading=true;
                this.loading = true;
                let page=this.listQuery.page;
                let pageSize=this.config.pageSize;
                let date=moment(this.formInline.giveTimeStart).format('YYYY-MM')
                let provinceId = this.formInline.provinceId;
                let cityId = this.formInline.cityId;
                let areaId = this.formInline.areaId;
                let newTeacherCountStatus=this.newTeacherCountStatus,
                    newParentCountStatus=this.newParentCountStatus,
                    newStudentCountStatus=this.newStudentCountStatus,
                    allUserCountStatus=this.allUserCountStatus;
                listNewUserPage(page, pageSize, date, provinceId, cityId, areaId, newTeacherCountStatus, newParentCountStatus, newStudentCountStatus, allUserCountStatus).then(res => {
                    this.loading=false;
                    this.AnnounceList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                }).catch(() => {
                    this.loading = false;
                });
            },
            exportFile() {
                let date=moment(this.formInline.giveTimeStart).format('YYYY-MM')
                let provinceId = this.formInline.provinceId;
                let cityId = this.formInline.cityId;
                let areaId = this.formInline.areaId;
                let newTeacherCountStatus=this.newTeacherCountStatus,
                    newParentCountStatus=this.newParentCountStatus,
                    newStudentCountStatus=this.newStudentCountStatus,
                    allUserCountStatus=this.allUserCountStatus;
                window.location.href = `${LOCAL_API.scy}/report/user/outExcelByAddNewUser?date=${date}&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&newTeacherCountStatus=${newTeacherCountStatus}&newParentCountStatus=${newParentCountStatus}&newStudentCountStatus=${newStudentCountStatus}&allUserCountStatus=${allUserCountStatus}`
                // outExcelByAddNewUser(year,month,provinceId,cityId,areaId).then(res=>{
                // })
            },
            sortChange({ column, prop, order }) {
                this.newTeacherCountStatus=prop=='teacherNumber'?order=='ascending'?'0':'1':'';
                this.newParentCountStatus =prop=='parentNumber'?order=='ascending'?'0':'1':'';
                this.newStudentCountStatus =prop=='studentNumber'?order=='ascending'?'0':'1':'';
                this.allUserCountStatus =prop=='allNumber'?order=='ascending'?'0':'1':'';
                this.listQuery.page = 1;
                this.searchTable();
            },
             // 分页
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.ChangePageSize(val);
                this.searchTable();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.searchTable();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>                     